<template>
	<div class="AddProd">
		<el-card shadow="hover">
			<el-form inline ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
					<el-tab-pane label="商品类目" :name="0">
						<section>
							<div class="content">
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item prop="standardCategoryId" label="标准分类">
											<CateSelector v-model="ruleForm.standardCategoryId" :cateType="2" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="商品品牌">
											<el-select
												v-model="ruleForm.brandId"
												filterable
												remote
												reserve-keyword
												placeholder="Please enter a keyword"
												:remote-method="brandRemoteMethod"
												:loading="brandLoading"
											>
												<el-option v-for="item in brandOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
											</el-select>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item prop="productCategoryId" label="自定义分类">
											<CateSelector
												v-model:firstId="ruleForm.productCategoryFirstId"
												v-model:secondId="ruleForm.productCategorySecondId"
												v-model:thirdId="ruleForm.productCategoryId"
											/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item prop="previewStatus" label="是否预售">
											<el-radio-group v-model="ruleForm.previewStatus">
												<el-radio :label="1">是</el-radio>
												<el-radio :label="0">否</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
								</el-row>
								<el-row :gutter="20">
									<el-col :span="12">
										<el-form-item prop="tagId" label="商品标签">
											<el-select v-model="ruleForm.tagId" placeholder="请选择商品标签">
												<el-option v-for="item in tagsList" :key="item.id" :label="item.tagName" :value="item.id" />
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="是否新品">
											<el-radio-group v-model="ruleForm.newStatus">
												<el-radio :label="1">是</el-radio>
												<el-radio :label="0">否</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
								</el-row>
							</div>
						</section>
					</el-tab-pane>
					<el-tab-pane label="商品信息" :name="1">
						<section>
							<el-row :gutter="20">
								<el-col :span="24">
									<el-form-item prop="name" label="商品名称">
										<el-input show-word-limit maxlength="200" v-model="ruleForm.name"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item prop="shopDesc" label="商品简介">
										<el-input show-word-limit maxlength="200" v-model="ruleForm.shopDesc"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item prop="keyword" label="SEO关键词">
										<el-input show-word-limit maxlength="200" v-model="ruleForm.keyword"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</section>
					</el-tab-pane>
					<el-tab-pane label="商品图片/视频" :name="2">
						<section>
							<h2>商品图片</h2>
							<div class="content">
								<ImgSet v-model="ruleForm.albumPicsArr" :mainPic="true" />
							</div>
						</section>
						<section>
							<h2>商品视频</h2>
							<div class="content">
								<SingleVideoSelector v-model="ruleForm.videoUrl" v-model:poster="ruleForm.videoImgUrl" />
							</div>
						</section>
					</el-tab-pane>
					<el-tab-pane label="商品介绍" :name="3">
						<section>
							<div class="subtitle">产品说明</div>
							<div class="content">
								<ProductOverview v-model="ruleForm.descriptionArr" />
							</div>
							<div class="subtitle">商品详情</div>
							<div class="content">
								<div class="editor_wrap">
									<Editor v-model="ruleForm.detailDesc" />
								</div>
							</div>
							<!-- <div class="subtitle">Weights&Dimensions 重量及尺寸</div>
							<div class="content">
								<Dimensions v-model:framePic="ruleForm.framePic" v-model:dimensionList="ruleForm.dimensionList" />
							</div> -->
						</section>
					</el-tab-pane>
					<el-tab-pane label="商品规格" :name="4">
						<section>
							<div class="content">
								<SelectSpecification v-model="ruleForm.specificationList" @changeList="specificationListChange" />
							</div>
							<div class="subtitle">规格明细</div>
							<div class="content">
								<el-table :data="ruleForm.specificationDetail" style="width: 100%">
									<el-table-column prop="name" label="规格"></el-table-column>
									<el-table-column label="规格值">
										<template #default="scope">
											<div>
												<MyTag
													v-model="scope.row.valueList"
													:specificationName="scope.row.name"
													@changeTagList="changeTagList"
													@inputTag="inputTag"
													@addSpecificationValue="addSpecificationValue"
													@delSpecificationValue="delSpecificationValue"
												></MyTag>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div class="subtitle" style="margin-top: 10px">规格设置</div>
							<div class="content">
								<SpecificationSet v-model="ruleForm.skuStockList" />
							</div>
						</section>
					</el-tab-pane>
				</el-tabs>

				<!-- <section>
					<h2>商品附件</h2>
					<div class="content">
						<FileSelector v-model="ruleForm.pdfUrl" />
					</div>
				</section> -->
			</el-form>
			<el-affix position="bottom" :offset="0">
				<div class="foot_btns">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="saveProd">保 存</el-button>
				</div>
			</el-affix>
		</el-card>
	</div>
</template>

<script setup>
import CateSelector from '/@/components/common/CateSelector.vue';
import ImgSet from './ImgSet.vue';
import ProductOverview from './productOverview/ProductOverview.vue';
import Editor from '/@/components/common/editor/Editor.vue';
import SelectSpecification from './SelectSpecification.vue';
import MyTag from './MyTag.vue';
import SpecificationSet from './SpecificationSet.vue';
import Dimensions from './dimensions/Dimensions.vue';
import { rules, useSaveProd, useBrand, useTags, useSpecification, useEditProd } from './addProd';
import SingleVideoSelector from '/@/components/videoSelector/SingleVideoSelector.vue';
import FileSelector from '/@/components/fileSelector/FileSelector.vue';

const activeName = ref(0);
const { proxy } = getCurrentInstance();
const { ruleForm, formRef, saveProd, cancel } = useSaveProd(proxy);
const { specificationListChange, changeTagList, inputTag, addSpecificationValue, delSpecificationValue } = useSpecification(ruleForm);
const { brandLoading, brandOptions, brandRemoteMethod } = useBrand(ruleForm);
const { tagsList } = useTags();
useEditProd(ruleForm);
</script>

<style lang="scss" scoped>
.AddProd {
	padding-bottom: 50px;
	section {
		padding: 10px 20px;
		h2 {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.subtitle {
			color: #333333;
			padding-left: 1em;
			margin-bottom: 10px;
		}
		.editor_wrap {
			height: 600px;
		}
		.super_sale {
			display: flex;
			.avatar_wrap {
			}
			.form_wrap {
				flex: 1;
				max-width: 300px;
			}
		}
	}
	.foot_btns {
		padding: 5px 0;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.8);
	}
}
</style>
